<template>
    <view>
        <view class="status">{{status.text}}</view>
        <view class="store">
            <image class="logo" :src="Func.getImage(model.order?.store?.images[0]?.path||'')" />
            <view class="name">{{model.order.store?.name || ''}}</view>
        </view>
        <view class="goods">
            <view class="item" v-for="goods in model.order?.goods" :key="goods.id">
                <view class="flex">
                    <image class="image" :src="Func.getImage(goods.path)" mode="aspectFit" />
                    <view class="ml-10">
                        <view>
                            {{goods?.name}}
                            <template v-if="goods.attributes?.length">
                                ({{goods.attributes.reduce((last,a)=>last.push(a.name) && last,[]).join(',')}})
                            </template>
                        </view>
                        <view>x{{goods.quantity}}</view>
                    </view>
                </view>
                <view>￥{{(1000 * goods.quantity * (goods.is_weigh ? goods.weight : goods.price)/1000).toFixed(2)}}
                </view>
            </view>
            <view class="remark">
                <view>备注：</view>
                <view>{{model.order?.remark||'无'}}</view>
            </view>
            <view class="total">
                <view>小计：</view>
                <view>￥{{model.order?.total}}</view>
            </view>
        </view>
        <view class="desc">
            <view class="contact" v-if="model.order?.consignee_phone">
                <text class="action" @click="hdContact">
                    <uni-icons type="phone" size="40rpx" />
                    <view class="padding-10">联系顾客</view>
                </text>
            </view>
            <view class="item">
                <view class="flex-3">编号：</view>
                <view class="text">{{model.order?.table_num}}</view>
            </view>
            <view class="item">
                <view class="flex-3">订单号：</view>
                <view class="text">{{model.order?.order_num}}</view>
            </view>
            <view class="item">
                <view class="flex-3">订单类型：</view>
                <view class="text">{{Func.orderStatusText(model.order.delivery_type)}}</view>
            </view>
            <view class="item">
                <view class="flex-3">支付方式：</view>
                <view class="text">{{paymentText(model.order.payment_provider)}}</view>
            </view>
            <view class="item">
                <view class="flex-3">订单时间：</view>
                <view class="text">{{model.order?.created_at}}</view>
            </view>
            <view class="delivery" v-if="model.order?.consignee_phone">
                <view class="flex-3">配送地址：</view>
                <view class="detail">
                    <view>{{model.order?.consignee}} {{model.order?.consignee_phone}}</view>
                    <view>{{model.order?.consignee_address}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { onPullDownRefresh, onLoad } from '@dcloudio/uni-app'
    import { reactive, computed } from 'vue'
    import { useGlobalStore } from '@/stores/global'
    import Constants from '@/utils/constants'
    import Func from '@/utils/functions'
    import { orderShow } from './service'

    const global = useGlobalStore()
    const model = reactive<any>({
        id: 0,
        order: {}
    })


    const status = computed(() => {
        let data = {}
        const order = model.order
        if (order.status == Constants.STATUS_IN_PROCESS) {
            if (order.refunds?.length) {
                const refund = order.refunds[0]
                refund?.status == Constants.REFUND_REQUEST && (data = { icon: 'info', color: '#f3a73f', text: '退款审核中' })
                refund?.status == Constants.REFUND_AGREE && (data = { icon: 'info', color: '#f3a73f', text: '已同意退款，退款中', desc: '退款金额将1~3工作日原路返回，请注意账户金额变动' })
                refund?.status == Constants.REFUND_REFUSE && (data = { icon: 'closeempty', color: '#e43d33', text: '拒绝退款', reason: refund?.reason })
                refund?.status == Constants.ORDER_REFUSE && (data = { icon: 'closeempty', color: '#e43d33', text: '拒接订单', desc: '退款金额将1~3工作日原路返回，请注意账户金额变动' })
            } else {
                if (order.in_process_status == Constants.IN_PROCESS_PENDING_PAYMENT) {
                    data = { icon: 'info', color: '#f3a73f', text: '订单待支付', desc: '' }
                    order.pay_time && (data = { icon: 'info', color: '#f3a73f', text: '支付确认中', desc: '' })
                }
                order.in_process_status == Constants.IN_PROCESS_PAYMENT_RECEIVED && (data = { icon: 'info', color: '#f3a73f', text: '待接单', desc: '' })
                order.in_process_status == Constants.IN_PROCESS_IN_WAREHOUSE && (data = { icon: 'info', color: '#f3a73f', text: '备货中', desc: '' })
                order.in_process_status == Constants.IN_PROCESS_PROCESSED && (data = { icon: 'info', color: '#f3a73f', text: '待发货', desc: '' })
                order.in_process_status == Constants.IN_PROCESS_SHIPPED && (data = { icon: 'info', color: '#f3a73f', text: '订单配送中', desc: '' })
            }
        } else if (order?.status == Constants.STATUS_CLOSED) {
            order.refunds?.length && (data = { icon: 'checkmarkempty', color: '#18bc37', text: '已退款', desc: '退款金额将1~3工作日原路返回，请注意账户金额变动', reason: order.refunds[0].reson })
            order.in_process_status == Constants.IN_PROCESS_PENDING_PAYMENT && (data = { icon: 'checkmarkempty', color: '#18bc37', text: '已取消' })
        } else if (order?.status == Constants.STATUS_COMPLETED) {
            data = { icon: 'checkmarkempty', color: '#18bc37', text: '订单已完成', desc: '' }
        }
        return data
    })
    const paymentText = value => {
        switch (value) {
            case 'wxpay':
                return '微信支付'
            case 'alipay':
                return '支付宝支付'
            default:
        }
        return ''
    }

    const hdContact = num => {
        uni.makePhoneCall({
            phoneNumber: model.order.consignee_phone,
            fail(e) {
                console.log(e)
            }
        })
    }

    const loadOrder = async () => {
        try {
            Func.showLoading()
            const res = await orderShow({ id: model.id })
            if (res?.code === Constants.API_SUCCESS) {
                return model.order = res.data
            }
            throw res
        } catch (e) {
            console.log(e)
            e?.code == Constants.CLIENT_ERROR && (e.text = e.msg)
            Func.hdError(e, Func.t('Failed to load data'))
        } finally {
            Func.hideLoading()
        }
    }

    onLoad(data => {
        if (data?.id) {
            model.id = data.id
            loadOrder()
        }
    })
</script>

<style lang="scss" scoped>
    .flex {
        display: flex;
    }

    .flex-3 {
        flex: 3;
    }

    .ml-10 {
        margin-left: 10rpx;
    }

    .padding-10 {
        padding: 10rpx;
    }

    .status {
        font-weight: bold;
        font-size: 40rpx;
        margin-bottom: 20rpx;
        background: #fff;
        text-align: center;
        padding: 20rpx 0;
    }

    .store {
        background-color: #fff;
        margin-bottom: 10rpx;
        padding: 20rpx;
        display: flex;
        align-items: center;
        color: #3a3a3a;

        & .logo {
            width: 60rpx;
            height: 60rpx;
            display: block;
            border-radius: 50rpx;
        }

        & .name {
            padding: 0 10rpx;
        }
    }

    .goods {
        background: #fff;
        margin-bottom: 20rpx;

        & .item {
            display: flex;
            justify-content: space-between;
            padding: 20rpx;

            & .image {
                width: 160rpx;
                height: 160rpx;
                display: block;
                border-radius: 10rpx;
            }
        }

        & .remark,
        & .total,
        & .delivery {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10rpx 20rpx;
        }

        & .remark {
            justify-content: flex-start;
        }
    }

    .desc {
        background: #fff;
        padding: 20rpx;

        & .contact {
            display: flex;
            margin-bottom: 20rpx;

            & .action {
                display: flex;
                align-items: center;
                padding: 4rpx 40rpx;
                border: 1px solid #b9b9b9;
            }
        }

        & .item {
            display: flex;
            align-items: center;
            padding: 10rpx 0;

            & .text {
                font-size: 28rpx;
                color: #6a6a6a;
                flex: 10;
            }
        }

        & .delivery {
            display: flex;
            align-items: center;
            padding: 10rpx 0;

            & .detail {
                font-size: 28rpx;
                color: #6a6a6a;
                flex: 10;
            }
        }
    }
</style>